<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_tutorials">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li class="active"><a href="../tutorials">Tutorials</a></li>
				<li ><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">GoldenLayout</li>
	<li >
		<a href="getting-started.html">Getting Started</a>
	</li>
	<li >
		<a href="getting-started-react.html">Getting Started ReactJS</a>
	</li>
	<li >
		<a href="saving-state.html">Saving State</a>
	</li>
	<li >
		<a href="dynamically-adding-components.html">Adding Items</a>
	</li>
	<li >
		<a href="adding-controls-to-header.html">Header Controls</a>
	</li>
	<li >
		<a href="working-with-popouts.html">Popouts</a>
	</li>
	<li >
		<a href="extending-tabs.html">Extending Tabs</a>
	</li>

	<li class="head">Usage with...</li>
	<li >
		<a href="requirejs.html">RequireJS</a>
	</li>
	<li class="active">
		<a href="angular-simple.html">Angular (simple)</a>
	</li>
	<li >
		<a href="angular-complex.html">Angular (complex)</a>
	</li>
	<li >
		<a href="highcharts.html">HighCharts</a>
	</li>
	<li >
		<a href="slickgrid.html">SlickGrid</a>
	</li>
</ul>
			<div id="content">
				<h1>Simple Angular integration</h1><p>When it comes to using GoldenLayout with Angular there&#39;s a large number of approaches. This tutorial covers the most basic one. For a more advances use case, please have a look at <a href="angular-complex.html">this tutorial</a>.</p><h3>Keeping it dead simple</h3><p>This will be our app: Two controllers, nothing to it.</p><pre><code>angular<span class="token punctuation" >.</span><span class="token function" >module<span class="token punctuation" >(</span></span> <span class="token string" >'userModule'</span><span class="token punctuation" >,</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span> <span class="token punctuation" >)</span>
    <span class="token punctuation" >.</span><span class="token function" >controller<span class="token punctuation" >(</span></span> <span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> $scope <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
        $scope<span class="token punctuation" >.</span>name <span class="token operator" >=</span> <span class="token string" >'John Dee'</span><span class="token punctuation" >;</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >)</span>
    <span class="token punctuation" >.</span><span class="token function" >controller<span class="token punctuation" >(</span></span> <span class="token string" >'userDetails'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> $scope <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
        $scope<span class="token punctuation" >.</span>age <span class="token operator" >=</span> <span class="token number" >38</span><span class="token punctuation" >;</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>Our aim is to lay them out side by side with a splitter in between them:</p><p><p data-height="268" data-theme-id="7376" data-slug-hash="c1b7d914ceb5504f2a2425f918b8511c" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/wolframhempel/pen/c1b7d914ceb5504f2a2425f918b8511c/'>Angular Simple</a> by Wolfram Hempel (<a href='http://codepen.io/wolframhempel'>@wolframhempel</a>) on <a href='http://codepen.io'>CodePen</a>.</p></p><script async src="//codepen.io/assets/embed/ei.js"></script>

<h3>Why can&#39;t I just add <code>ng-app</code> to the body tag?</h3><p>Angular looks for <code>ng-app</code> attributes and works its magic once the document is ready. However, so does GoldenLayout. So in order to make the two work together you have to follow these three steps:</p><ul>
<li>Create a Layout with GoldenLayout</li>
<li>Load your templates into GoldenLayout&#39;s containers</li>
<li>Bootstrap Angular</li>
</ul>
<h3>Creating the layout</h3><p>This one should be fairly straight forward by now. If not, have a look at the <a href="getting-started.html">getting started tutorial</a>. Two container, side by side, without headers. 
The only thing note-worthy is the <code>{ templateId: &#39;userNameTemplate&#39; }</code> bit. This will be used to tell our component which template to load.</p><pre><code>myLayout <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >GoldenLayout</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
    settings<span class="token punctuation" >:</span><span class="token punctuation" >{</span>
        hasHeaders<span class="token punctuation" >:</span> <span class="token keyword" >false</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
    content<span class="token punctuation" >:</span><span class="token punctuation" >[</span><span class="token punctuation" >{</span>
        type<span class="token punctuation" >:</span> <span class="token string" >'row'</span><span class="token punctuation" >,</span>
        content<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
            type<span class="token punctuation" >:</span> <span class="token string" >'component'</span><span class="token punctuation" >,</span>
            componentName<span class="token punctuation" >:</span> <span class="token string" >'template'</span><span class="token punctuation" >,</span>
            componentState<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> templateId<span class="token punctuation" >:</span> <span class="token string" >'userNameTemplate'</span> <span class="token punctuation" >}</span>
        <span class="token punctuation" >}</span><span class="token punctuation" >,</span><span class="token punctuation" >{</span>
            type<span class="token punctuation" >:</span> <span class="token string" >'component'</span><span class="token punctuation" >,</span>
            componentName<span class="token punctuation" >:</span> <span class="token string" >'template'</span><span class="token punctuation" >,</span>
            componentState<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> templateId<span class="token punctuation" >:</span> <span class="token string" >'userDetailTemplate'</span> <span class="token punctuation" >}</span>
        <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><h3>Loading Templates</h3><p>For this example we&#39;ll store our html in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">template tags</a>. (Not supported in IE). This is only one of many ways to store and retrieve pieces of html. You could also use Angular&#39;s <code>$templateCache</code> or <code>ng-include</code> method, RequireJS&#39; text plugin, hidden divs, Ajax or a number of other approaches.</p><pre><code><span class="token operator" >&lt;</span>template type<span class="token operator" >=</span><span class="token string" >"text/html"</span> id<span class="token operator" >=</span><span class="token string" >"userNameTemplate"</span><span class="token operator" >></span>
    <span class="token operator" >&lt;</span>div ng<span class="token operator" >-</span>controller<span class="token operator" >=</span><span class="token string" >"user"</span> <span class="token keyword" >class</span><span class="token operator" >=</span><span class="token string" >"section"</span><span class="token operator" >></span>
        <span class="token operator" >&lt;</span>strong<span class="token operator" >></span>Username<span class="token operator" >&lt;</span><span class="token operator" >/</span>strong<span class="token operator" >></span> <span class="token punctuation" >{</span><span class="token punctuation" >{</span>name<span class="token punctuation" >}</span><span class="token punctuation" >}</span>
    <span class="token operator" >&lt;</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token operator" >&lt;</span><span class="token operator" >/</span>template<span class="token operator" >></span>

<span class="token operator" >&lt;</span>template type<span class="token operator" >=</span><span class="token string" >"text/html"</span> id<span class="token operator" >=</span><span class="token string" >"userDetailTemplate"</span><span class="token operator" >></span>
    <span class="token operator" >&lt;</span>div ng<span class="token operator" >-</span>controller<span class="token operator" >=</span><span class="token string" >"userDetails"</span> <span class="token keyword" >class</span><span class="token operator" >=</span><span class="token string" >"section"</span><span class="token operator" >></span>
        <span class="token operator" >&lt;</span>strong<span class="token operator" >></span>Age<span class="token operator" >&lt;</span><span class="token operator" >/</span>strong<span class="token operator" >></span> <span class="token punctuation" >{</span><span class="token punctuation" >{</span>age<span class="token punctuation" >}</span><span class="token punctuation" >}</span>
    <span class="token operator" >&lt;</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token operator" >&lt;</span><span class="token operator" >/</span>template<span class="token operator" >></span>
</code></pre><p>Our component will retrieve the template&#39;s html and inject it into the container.</p><pre><code>myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'template'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
    <span class="token keyword" >var</span> templateHtml <span class="token operator" >=</span> $<span class="token punctuation" >(</span> <span class="token string" >'#'</span> <span class="token operator" >+</span> state<span class="token punctuation" >.</span>templateId <span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >html<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    container<span class="token punctuation" >.</span><span class="token function" >getElement<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >html<span class="token punctuation" >(</span></span> templateHtml <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><h3>Bootstrapping our App</h3><p>All that&#39;s left now is to create our layout and, once it&#39;s initialised, bootstrap Angular.</p><pre><code>myLayout<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'initialised'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >{</span>
    angular<span class="token punctuation" >.</span><span class="token function" >bootstrap<span class="token punctuation" >(</span></span> document<span class="token punctuation" >.</span>body<span class="token punctuation" >,</span> <span class="token punctuation" >[</span> <span class="token string" >'userModule'</span> <span class="token punctuation" >]</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>

myLayout<span class="token punctuation" >.</span><span class="token function" >init<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>